<template>
  <div class="dataView">
    <!-- 数据面板 -->
    <PanelGroup />
    <el-row v-if="true" style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <!-- 线性数据视图 -->
      <LineChart :chart-data="lineChartData" />
    </el-row>
    <el-row v-if="true" :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <!-- 雷达状数据视图 -->
          <RaddarChart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <!-- 饼状数据视图 -->
          <PieChart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <!-- 柱形数据视图 -->
          <BarChart />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "./components/PanelGroup.vue"; //数据面板
import LineChart from "./components/LineChart.vue"; //线性数据视图
import RaddarChart from "./components/RaddarChart.vue"; //雷达状数据视图
import PieChart from "./components/PieChart.vue"; //饼状数据视图
import BarChart from "./components/BarChart.vue"; //柱形数据视图
import { reactive } from 'vue';
export default {
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  setup() {
    const lineChartData = reactive([
      {
        name: '预期',
        type: 'line',
        // stack: 'Total',
        data: [423, 465, 687, 789, 809, 456, 423]
      },
      {
        name: '实现',
        type: 'line',
        // stack: 'Total',
        data: [123, 354, 475, 1000, 0, 1000, 0]
      },
      {
        name: '过去',
        type: 'line',
        // stack: 'Total',
        data: [123, 624, 357, 468, 25, 745, 235]
      },
      {
        name: '目标',
        type: 'line',
        // stack: 'Total',
        data: [412, 345, 568, 97, 123, 456, 100]
      },
    ])

    return {
      lineChartData
    }
  }
}
</script>

<style lang="scss" scoped>
.dataView {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  overflow-x: hidden;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>